<template>
    <div>
        <div>
            <el-switch v-model="active_component.propValue.shadow" active-text="默认阴影" inactive-text="选择阴影"></el-switch>
        </div>
        <div v-for="(item,i) in active_component.propValue.imgList" :key="i">
            <img style="width:50rem;height:auto;object-fit:cover;" :src="item.img" alt="">
            <el-input v-model="item.img"></el-input>
            <div class="flex describe">
                <div>标题:</div>
                <el-input style="width:200rem;margin-left:10rem" v-model="item.title"></el-input>
                <div style="margin-left:100rem">内容:</div>
                <el-input style="width:200rem;margin-left:10rem" v-model="item.content"></el-input>
            </div>
            <div class="flex">
                <Upload :text="'上传图标'" @confrim="(e)=>{confrim(e,i)}" :type="'primary'"></Upload>
                <el-button style="margin-left:50rem" type="danger" icon="el-icon-delete" class="rightmargin" @click="deletephoto(i)">删除该项</el-button>
            </div>
        </div>
        <div style="margin-top:10px;">
            <el-button @click="additem" type="primary">新增</el-button>
        </div>
        <!-- <div style="margin-top: 20rem">内容对齐方式</div>
        <el-radio-group v-model="active_component.propValue.radio">
            <el-radio :label="1">居中</el-radio>
            <el-radio :label="2">左对齐</el-radio>
        </el-radio-group> -->
        <div class="flex-center" style="margin-top:10rem;">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushcanvas">确定</el-button>
        </div>
    </div>
</template>

<script>
import Upload  from "../Upload/index.vue";
export default {
    props: ["componentId", "componentList","activeCompont"],
    components: {Upload},
    data() {
        return {
            active_component: {},
        }
    },
    created() {
        if(this.activeCompont){
            this.active_component =this.activeCompont
        }else{
            for (let key in this.componentList) {
                if (
                    this.componentList[key].isDialog &&
                    this.componentList[key].propValue.value == this.componentId
                ) {
                    this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
                }
            }
        }
    },
    methods: {
        confrim(e,i){
            console.log(e);
            this.active_component.propValue.imgList[i].img=e
        },
        closeTK(){
            this.$emit("closeTK")
        },
        additem(){
             this.active_component.propValue.imgList.push({
                img:'',title: '', content: ''
             })
        },
        // 点击删除图片
        deletephoto(i) {
            console.log(i);
            this.active_component.propValue.imgList.splice(i,1)
        },
        pushcanvas() {
            if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
                this.$emit("closeTK")//关闭弹框
            }else{
                let canvasStyle = this.$store.state.canvasStyleData;
                let component = this.active_component;
                component.style.top = Number(canvasStyle.height);
                component.style.left = 600;
                this.$store.commit("addComponent", { component: component });
                canvasStyle.height = String(
                    Number(canvasStyle.height) + Number(component.style.height)
                );
                this.$store.commit("setCanvasStyle", canvasStyle);
                this.$emit("closeTK")//关闭弹框
            }
        },
    }
}
</script>

<style lang="scss" scoped>
    .describe {
        margin: 10rem 0;
    }
</style>
